<template>
	<view class="padding-bt-100 mainPage">
		<view class="padding">
			<view class="status-text text-white" v-if="info.state===0">
				请在{{info.expire_time}}前完成支付，超时自动取消
			</view>
			
			<view class="address radius-xl padding-sm bg-white margin-bottom">
				<view class="icon">
					<image src="@/static/image/order/location.png" mode=""></image>
				</view>
				<view class="info margin-left-sm">
					<view>
						<text class="text-black">{{info.name}}</text>
						<text class="padding-left-sm">{{info.mobile}}</text>
					</view>
					<view>
						<text class="gray text-sm">{{info.province}}{{info.city}}{{info.area}}{{info.street}}{{info.address_detail}}</text>
					</view>
				</view>
			</view>
			<!-- 预约项目 -->
			<view class="project-list padding-sm radius-xl bg-white margin-bottom-sm">
				<view class="solid-bottom">
					<view class="title">
						<text class="cuIcon-titles themeColor"></text>预约项目
					</view>
					<view class="project padding-tb-sm" v-for="(item,index) in info.projects" :key="index">
						<image :src="item.thumb" mode="" class="image"></image>
						<view class="proBox padding-left-sm">
							<view class="nameandtime">
								<view class="name text-bold text-black">{{item.service_title}}</view>
								<view class="time text-gray text-sm">{{item.duration}}分钟</view>
							</view>
							<view class="desc text-sm text-gray margin-bottom-sm">{{item.tips}}</view>
							<view class="cost">
								<view class="text-red text-bold">￥{{item.price}}</view>
								<view class="num text-gray">x{{item.num}}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="crow margin-bottom-xs padding-top-sm">
					<view class="name"></view>
					<view class="content">
						<template v-if="state>0&&state<=4">
							<button class="cu-btn china-btn-bg round margin-left-xs" @click="addOrderShow = true">延长服务</button>
						</template>
						<template v-if="state===4">
							<button class="cu-btn china-btn-bg round margin-left-xs" @click="endOrder()">结束服务</button>
						</template>
					</view>
				</view> -->
			</view>
			
			<!-- 订单明细 -->
			<view class="orderInfo padding-sm radius-xl bg-white margin-bottom">
				<view class="title margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>订单明细
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">项目金额</view>
					<view class="content">
						<text class="text-bold">¥ {{info.basic_price}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">延长金额</view>
					<view class="content">
						<text class="text-bold">¥ {{info.overtime_price}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm" v-if="info.travel_price">
					<view class="name">出行费用</view>
					<view class="content">
						<text class="text-bold">¥ {{info.travel_price}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm" v-if="info.travel_name">
					<view class="name">车费详情</view>
					<view class="content">
						<text class="text-bold">{{info.travel_name}}</text>
						<text class="padding-left-xs">全程{{info.distance_text}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">支付方式</view>
						<view class="content payType" v-if="info.pay_type==='money'">
							<image src="@/static/image/order/balance.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">余额支付</text>
						</view>
						<view class="content payType" v-else-if="info.pay_type==='wxpay'">
							<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">微信支付</text>
						</view>
						<view class="content payType" v-else-if="info.pay_type==='alipay'">
							<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">支付宝</text>
						</view>
						<view class="content payType" v-else-if="info.pay_type==='epay'">
							<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">易支付</text>
						</view>
				</view>
				<view class="crow margin-bottom-sm text-sm" v-if="info.coupon_money > 0">
					<view class="name">优惠金额</view>
					<view class="content">
						<text class="text-red text-bold">- ¥ {{info.coupon_money}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name text-bold">支付金额</view>
					<view class="content">
						<text class="text-red text-bold">¥ {{info.price}}</text>
					</view>
				</view>
			</view>
			
			<!-- 订单详情 -->
			<view class="orderInfo padding-sm radius-xl bg-white">
				<view class="title margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>订单信息
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">服务技师</view>
					<view class="content">
						<view class="cu-avatar sm round margin-left" :style="{backgroundImage: 'url('+info.technician_headimg+')'}"></view>
						<text class="padding-left-xs text-bold">{{info.technician_nickname}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">订单编号</view>
					<view class="content">
						<text class="text-bold">{{info.trade}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">预约时间</view>
					<view class="content">
						<text class="text-bold">{{info.start_time}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">订单备注</view>
					<view class="content">
						<text class="text-bold">{{info.remark}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<loading v-if="pageLoading"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				info:{}
			};
		},
		onLoad(options) {
			this.getOrderInfo(options.trade)
		},
		methods:{
			getOrderInfo(trade){
				this.$utils.$api.Orders.info(trade).then(data=>{
					this.info=data;
				}).catch(err=>{
					uni.showModal({
						title: '提示',
						content: err.msg,
						showCancel: false,
						success: () => {
							this.$utils.$page.back();
						}
					})
				})
			},
			endOrder(){
				this.pageLoading = true;
			},
		}
	}
</script>

<style lang="less" scoped>
.address{
	display: flex;
	align-items: center;
	.icon{
		image{
			width: 44upx;
			height: 44upx;
		}

	}
}
.project-list{
	.project{
		display: flex;
		.image{
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}
		.proBox{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nameandtime,.cost{
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
.crow{
	justify-content:space-between
}
.step{
	display: flex;
	justify-content: flex-start;
	.content{
		margin-left:20upx
	}
}
.payType{
	display: flex;
	align-items: center;
	.payTypeImg{
		width: 40upx;
		height: 40upx;
	}
}
</style>
